<script setup lang="ts">
import { ref } from 'vue'
import { addJueSeApi } from '@/api/system'
import { onMounted } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import addChange from './components/addChange.vue'
import { ElMessage, ElMessageBox } from 'element-plus'
// import { YingYongTree } from '@/utils/publicMethods'
import { usetreeStore } from '@/stores/index'

const treeStore = usetreeStore()
// 树结构TS类型
interface Tree {
  attributes?: {
    class_comment: string
    class_order: number
    level: number
  }
  children?: Tree[]
  id: number
  parent: number
  state: string
  text: string
}

// 添加应用分类弹窗
const addChangeShow = ref(false)
const formInfo = ref({})
const acTitle = ref('添加应用分类')
// 默认展开
const defaultExpandedKeys = ref([0])
const addYingYongBtn = () => {
  // console.log('添加应用按钮')
  acTitle.value = '添加一级应用分类'
  addChangeShow.value = true
}
const append = (data: Tree) => {
  // console.log('添加', data)
  defaultExpandedKeys.value = [data.id]
  acTitle.value = '添加应用分类'
  formInfo.value = data
  addChangeShow.value = true
}
const change = (data: Tree) => {
  defaultExpandedKeys.value = [data.id]
  acTitle.value = '修改应用分类'
  addChangeShow.value = true
  formInfo.value = data
}
const remove = (data: Tree) => {
  const params = {
    sqlId: JSON.stringify([
      'appClassMgr.deleteAppClassRela',
      'appClassMgr.deleteRoleAppClass',
      'appClassMgr.deleteRoleApp',
      'appClassMgr.deleteAppClass'
    ]),
    sqlParam: JSON.stringify({ classId: data.id })
  }
  ElMessageBox.confirm('你确定要删除这本级分类？', '删除分类', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(async () => {
      await addJueSeApi(params)
        .then((res: any) => {
          // console.log(res)
          if (res === 'success') {
            ElMessage({ message: '删除成功', type: 'success' })
            treeStore.getSubClsTree()
            // getYingYongTree()
          } else {
            ElMessage({ message: '删除失败', type: 'error' })
          }
        })
        .catch(() => {
          ElMessage({ message: '操作失败', type: 'error' })
        })
    })
    .catch(() => {
      ElMessage({ message: '已取消删除', type: 'info' })
    })
}

onMounted(() => {
  treeStore.getSubClsTree()
})
</script>
<template>
  <div class="container">
    <el-scrollbar>
      <div id="actionBox">
        <el-button type="success" plain :icon="Plus" @click="addYingYongBtn"
          >添加一级分类</el-button
        >
      </div>
      <el-tree
        class="treeBox"
        style="max-width: 100%"
        :data="treeStore.appTreeList"
        node-key="id"
        :default-expanded-keys="defaultExpandedKeys"
        :expand-on-click-node="false"
      >
        <template #default="{ node, data }">
          <span class="custom-tree-node">
            <span class="title">{{ node.label }}</span>
            <span class="aciton">
              <a v-if="data.attributes.level !== 3" @click="append(data)"> 添加节点 </a>
              <a style="margin-left: 8px; color: #e6a23c" @click="change(data)"> 修改节点 </a>
              <a style="margin-left: 8px; color: #f56c6c" @click="remove(data)"> 删除 </a>
            </span>
          </span>
        </template>
      </el-tree>
    </el-scrollbar>
  </div>
  <addChange
    v-if="addChangeShow"
    v-model:is-show="addChangeShow"
    :title="acTitle"
    :formInfo="formInfo"
    @getYingYongTree="treeStore.getSubClsTree()"
  />
</template>
<style scoped lang="less">
#actionBox {
  padding: 0 8px;
  margin: 15px 0;
  .el-button {
    padding: 0 16px;
  }
}
.container {
  height: calc(100vh - 150px);
}
.treeBox {
  .custom-tree-node {
    .title {
      display: inline-block;
      width: 180px;
    }
    .aciton {
      display: inline-block;
      margin-left: 28px;
    }
  }
}
</style>
